<template>
	<view>
    <image src="/static/icon_bj.png" class="w100 absolute" mode="widthFix"></image>
    <view class="title-warp">
      <view class="title">劳动教育-学生端</view>
      <!-- <image src="/static/icon_iu.png"></image> -->
    </view>
    <view class="w100 relative pl-24 pr-24">
      <view class="w100 h-392 bgff br-20 rows rowsm rowsw mb-20">
        <view class="rowscl rowsm ml-15 mr-15 w-144" v-for="(item,index) in tabList" :key="index" @click="$tools.goNext(item.path)">
          <image :src="item.img" class="w-96 h-92 mb-10" mode=""></image>
          <view class="fs-24 col333">{{item.name}}</view>
        </view>
      </view>
      
      <view class="w100 h-84 br-20 bgff rows rowsm pl-28 pr-28 mb-20" @click="$tools.goNext('/pages/msg/notice')">
        <image src="/static/icon_tz.png" class="w-66 h-26 mr-20" mode=""></image>
        <view class="w-16 h-16 br-8 mr-20" style="background: linear-gradient(to bottom,#4897FF,#4878FF);"></view>
        <view class="w100">
          <uni-notice-bar single scrollable backgroundColor="rgba(0,0,0,0)" style="margin: 0;padding: 0;" :text="info" color="#888"></uni-notice-bar>
        </view>
      </view>
      
      <view class="w100 rowsb rowsm mb-20">
        <view class="fs-30 col333 fw-b">政策资讯</view>
        <view class="fs-24" style="color: #707070;" @click="$tools.goNext('/pages/index/newsList')">更多>></view>
      </view>
      
      <view class="w100 p-all-24 bgff br-20 mb-20" v-for="(item,index) in list" :key="index" @click="$tools.goNext('/pages/index/newsDetail?id=' + item.id)">
        <view class="fs-28 col666 mb-30">{{item.title}}</view>
        <view class="w100 rows rowsm" style="flex-direction: row-reverse;">
          <view class="fs-24 col888">{{item.createTime}}</view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					tabList:[
            {
              name:'基础劳动',
              img:'/static/icon_icg.png',
              path:'/pagesCopy/submitWork/baseWork'
            },
            {
              name:'社会公益劳动',
              img:'/static/icon_gy.png',
              path:'/pages/index/publicGood'
            },
            {
              name:'劳动成果',
              img:'/static/icon_cg.png',
              path:'/pages/index/gain'
            },
            {
              name:'劳动总结报告',
              img:'/static/icon_zj.png',
              path:'/pages/index/sumUp'
            },
            {
              name:'我的成绩',
              img:'/static/icon_zj.png',
              path:'/pagesCopy/myScore/myScore'
            },
            {
              name:'我的劳动',
              img:'/static/icon_ld.png',
              path:'/pagesCopy/myWork/myWork'
            },
            {
              name:'排行榜单',
              img:'/static/icon_ph.png',
              path:'/pages/index/rank'
            },
            // {
            //   name:'短视频',
            //   img:'/static/icon_sp.png',
            //   path:'/pagesCopy/video/list'
            // }
          ],
          list:[],
          info:'',
          total:0,
          limit: {
            pageNum: 1,
            pageSize: 10
          },
				}
			},
			onLoad() {
				this.getList()
			},
			methods: {
				getList(){
					this.$tools.axiosFromToken('POST',`prozczx/listRed?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{},'加载中').then(res => {
						if(res.code != 200) return this.$tools.showtt(res.msg)
            // 保留4条数据
            if (res.rows.length > 4) {
                this.list = res.rows.slice(0, 4);
              }else{
                this.list = res.rows
              }
					})
          
          this.$tools.axiosFromToken('POST','pronotice/list',{},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
            let {rows} = res
            this.info = rows[0].name
          })
				}
			},
		}
</script>

<style lang="scss">
	page {
		background: #f7f6fa;
	}
//  .uni-nav-bar-text{
//   display: inline-block;
//   font-size: 18px !important;
//   margin-top: 24px !important;
 
//  }

//  .relative{
//   top: 20px;
//  }
.title-warp{
  width: 100%;
  position: relative;
  height: 150px;
  .title{
    font-size: 22px;
    display: block;
    line-height: 175px;
    text-align: center;
  }
  image{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 77px;
    left: 15px;
  }
}

</style>
